<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
		<style>
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;				
			}
			body{
				display: flex;
				flex-wrap: wrap;
				justify-content:space-around;
			}
			div{
				width: 33%;	
				height: 100px;
				background: aquamarine;
				font-size: 32px;
				text-align: center;							
				border: white 2px solid;
			}
		</style>
	</head>
	<body>
		<div class="one"></div>
		<div class="one"></div>
		<div class="one"></div>
		<div class="one"></div>
		<div class="one"></div>
		<div class="one"></div>
		<div class="one"></div>
		<div class="one"></div>
		<div class="one"></div>
		<script type="text/javascript">
			   var div1 = document.getElementsByClassName("one");
			   var k = 1;
		
			 for (var i = 0; i < div1.length; i++) {
				div1[i].addEventListener("touchstart", function(e) {					
					    this.style.background = 'red';
					    this.innerText = k++;
				});
				div1[i].addEventListener("touchmove", function(e) {
					    this.innerText = e.touches.length + "|" + e.targetTouches.length + "|" + e.changedTouches.length;
				});
				div1[i].addEventListener('touchend', function(e) {
					    this.style.background='yellow';
				    	this.innerText = k-1;
				});
			}
		</script>
	</body>
</html